
<script setup>
import { getMyBookList } from '@/api/book/index.js'
import BookItem from './components/BookItem.vue';
import { onMounted, reactive, ref } from 'vue'

let bookInfoList = reactive({
  dataSource: {}
})
let loading = ref(true)
const loadData = () => {
  getMyBookList({pageNum: 0, pageSize: 20})
  .then(res => {
    bookInfoList.dataSource = res
    loading.value = false
  })
  .finally(() => {
    loading.value = false
  })
}
onMounted(() => {
  loadData()
})
</script>
<template>
<div class="book-manage">
  <div class="wrappers">
      <div class="title">作品列表</div>
      <router-link to="/user/book-manage/information">
        <a-button type="primary" shape="round">创建新作品</a-button>
      </router-link>
  </div>
  <a-spin :spinning="loading">
    <BookItem :dataSource="bookInfoList.dataSource.records" @delteNovel="loadData" />
  </a-spin>
</div>
</template>

<style lang="less" scoped>
.wrappers {
  display:flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 20px;
  .title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 21px;
  }
}
.book {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cover {
    width: 94px;
    img {
      width: 94px;
      height: 124px;
    }
  }
  .info {
    flex: 1;
    padding-left: 10px;
    .wrapper {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>